import React from 'react';
import { View, Text } from '@ray-js/ray';
import { Cell, CellGroup, DialogInstance, Switch } from '@ray-js/smart-ui';
import Strings from '../../i18n';
import styles from './index.module.less';

interface Props {
  onChange: (params: Record<string, any>) => void;
  style?: React.CSSProperties;
  dpId: string;
  dps: Record<string, any>;
}

export default ({ style, onChange, dpId, dps }: Props) => {
  const onClick = (v: boolean) => {
    onChange &&
      onChange({
        ...dps,
        [dpId]: v,
      });
  };

  return (
    <View style={style}>
      <CellGroup className={styles.noteBox}>
        <Cell title={Strings.getLang('power')} customClass={styles.noteCell}>
          <Switch checked={dps[dpId]} size="24px" onChange={e => onClick(e.detail)} />
        </Cell>
      </CellGroup>
    </View>
  );
};
